<template>
  <Breadcrumb>
    <BreadcrumbItem v-for="item in items" :key="item.id" :to="item.url">{{item.name}}</BreadcrumbItem>
  </Breadcrumb>
</template>

<script>
export default {
  data () {
    return {
      items: []
    }
  },
  computed: {
    curNode () {
      return this.$store.state[this.module].curNode
    }
  },
  props: {
    module: {
      type: String,
      required: true
    },
    getRouterPath: {},
    rootRouterPath: {
      type: String,
      required: true
    }
  },
  methods: {
    setItems (node) {
      if (node && node.id) {
        this.items.unshift({
          id: node.id,
          name: node.name,
          url: this.getRouterPath(node.id)
        })
        this.setItems(node.parent)
      } else {
        this.items.unshift({
          id: 'root',
          name: '根节点',
          url: this.rootRouterPath
        })
      }
    }
  },
  watch: {
    curNode (val) {
      this.items = []
      this.setItems(val)
      if (val) {
        this.$router.push(this.getRouterPath(val.id))
      } else {
        this.$router.push(this.rootRouterPath)
      }
    }
  },
  created () {
    this.setItems()
  }
}
</script>

<style>
</style>
